<template>
	<view>
		<view v-if="dataList && dataList.length>0">
			<view class="template-view" v-for="(item,index) in dataList" :key="index">

				<view class="flex-between items-center">
					<view class="font-def">订单号：{{item.shopbill}}</view>
					<view class="font-def">{{item.item_name}}</view>
				</view>

				<view class="flex-around items-center" style="margin-top: 20rpx;display: flex; justify-content: space-between; align-items: center;">
					<view style="display: flex; flex-direction: column; align-items: center;">
						<view class="address-city">{{item.sender_city}}</view>
						<view class="address-name">{{item.sender}}</view>
					</view>
					<view>
						<view style="text-align: center;">
							<image src="../../../static/step.png" style="width:80rpx;height: 12rpx;"></image>
						</view>
						<!-- 状态码（1.待揽收 2.运输中 3.已签收 4.拒收退回 99.已取消） -->
						<view v-if="item.type_code==1" style="font-size: 22rpx;color:#828282;text-align: center;">
							待揽收"
						</view>
						<view v-if="item.type_code==2" style="font-size: 22rpx;color:#828282;text-align: center;">
							运输中
						</view>
						<view v-if="item.type_code==3" style="font-size: 22rpx;color:#828282;text-align: center;">
							已签收
						</view>
						<view v-if="item.type_code==4" style="font-size: 22rpx;color:#828282;text-align: center;">
							拒收退回
						</view>
						<view v-if="item.type_code==99" style="font-size: 22rpx;color:#828282;text-align: center;">
							已取消
						</view>
					</view>
					<view style="display: flex; flex-direction: column; align-items: center;">
						<view class="address-city">{{item.receive_city}}</view>
						<view class="address-name">{{item.receiver}}</view>
					</view>
				</view>
				<view class="flex-start items-center font-def" style="margin-top: 20rpx;">
					<!--  -->
					下单时间：{{item.create_time ? $wanlshop.timeFormatS(item.create_time) : '——'}}
				</view>
				<view class="flex-start items-center font-def" style="margin-top: 10rpx;">
					支付金额：{{item.order_price}}
				</view>
				<view v-if="item.orLogisticsNumber" class="flex-start items-center font-def" style="margin-top: 10rpx;">
					快递单号：{{item.waybill}}
				</view>
				<view class="flex-end items-center">
					<view class="flex flex-end">
						<u-button v-if="item.state==301 || item.state==2 || item.state==3" @click="traces(item)"
							type="info" plain text="物流信息"
							:customStyle="{'height':'60rpx','width':'180rpx','margin':'0'}" shape="circle">
						</u-button>
						<!-- <u-button v-if="item.state==1" @click="cancelOrder(item)" type="info" plain text="取消订单"
							:customStyle="{'height':'60rpx','width':'180rpx','margin':'0','margin-left':'20rpx'}"
							shape="circle"> -->
						</u-button>
						<u-button v-if="item.cha_price && item.ischa === 1" @click="difference(item)"
							type="warning" plain :text="'补差价'+ (item.cha_price ? item.cha_price : 0) +'元'"
							:customStyle="{'height':'60rpx','width':'220rpx','margin':'0','margin-left':'20rpx','color':'#f9ae3d'}"
							shape="circle">
						</u-button>
					</view>
				</view>
			</view>	
			<u-loadmore :status="status" />
		</view>

		<view v-else style="margin-top: 200rpx;">
			<u-empty mode="order">
			</u-empty>
		</view>


	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import wanlshop_config from '@/common/config/config';
	export default {
		components: {
			//login
		},
		computed: {
			...mapState(['user'])
		},
		data() {
			return {
				isLogin: false,
				tabList: [{
						name: '全部',
						state: '1,-2,-1,120,102,103,104,301,2,3'
					},
					{
						name: '已付款',
						state: '1,120,102'
					},
					{
						name: '已接单',
						state: '103,104,301,2,3'
					},
					{
						name: '已退款',
						state: '-2,-1'
					}
				],
				current: 0,
				isload: true,
				page: 1,
				rows: 10,
				dataList: [],
				status: 'loading'
			}
		},
		onLoad() {
			var that = this;
				that.getList();
		},
		onShow() {
		
		},
		methods: {
			difference(item) {
				var that = this;
				// that.$api.post('Order/PayOrderDifference', {
				// 	userGuid: that.$us.getId(),
				// 	orId: item.id
				// }, function(res) {
				// 	if (res.StatusCode == 1) {
				// 		that.weChatPay(res.Data);
				// 	} else {
				// 		that.$uti.msg(res.Message);
				// 	}
				// }, '加载中...')
				// that.$api.post({
				// 	url: 'Order/PayOrderDifference',
				// 	data: {
				// 		userGuid: that.user.id,
				// 		orId: item.id
				// 	},
				// 	success: function(res) {
				// 		if (res.StatusCode == 1) {
				// 			that.weChatPay(res.Data);
				// 		} else {
				// 			that.$uti.msg(res.Message);
				// 		}
				// 	}
				// })
				// {"id":21,"item_name":"日用品","shopbill":"1716028743157420032","user_id":2,"order_price":"5.20","pay_price":"0.00","goods_price":"0.00","original_price":null,"price_one":null,"price_two":null,"price_three":null,"price_four":null,"price_five":null,"price_level":null,"discount_price_one":null,"price_more":null,"discount_price_more":null,"discount":null,"disprice":null,"price_comments":null,"ext_freight_flag":null,"ext_freight":null,"waybill":"test1184118177","freight":null,"freight_insured":null,"freight_haocai":null,"total_freight":"0.00","allow_insured":1,"insured":"0.00","tag_type":null,"tag_code":null,"channel_id":"1516988422814830592","channel":null,"channel_tag":"智能","channel_sub_tag":null,"channel_explain":null,"channel_logo_url":null,"charge_type":null,"channel_type":null,"sender_company":null,"receive_company":null,"sender":"测试1","sender_mobile":"16612345678","sender_province_id":"河北省","sender_city":"秦皇岛市","sender_county":"北戴河区","sender_town":null,"sender_location":"北戴河供电分公司号楼503","sender_address":"河北省秦皇岛市北戴河区北戴河供电分公司号楼503","receiver":"测试","receiver_mobile":"18812345678","receive_province":"天津市","receive_city":"天津市","receive_county":"0","receive_town":"0","receive_location":"南开大学人民医院31号楼503","receive_address":"天津市天津市天津市null","express_id":0,"express_no":0,"payment_id":1,"pay_status":0,"pay_time":"1970-01-01 08:00:00","change_bill":null,"change_bill_freigh":null,"fee_over":99,"linkName":"YYAPI-猫眼优选","bill_type":null,"bill_remark":"","comments":null,"courierPhone":null,"courierName":null,"pickupCode":null,"totalPrice":null,"type":null,"pickup_start_time":null,"pickup_stop_time":null,"deliver_time":"1970-01-01 08:00:00","receive_time":"1970-01-01 08:00:00","message":null,"type_code":1,"weight":"1","real_weight":null,"transfer_weight":null,"cal_weight":"1.00","volume":null,"volume_long":null,"volume_width":null,"volume_height":null,"parse_weight":null,"package_count":1,"sale_plat":null,"collection_value":null,"collection_money":null,"sign_return":null,"aging":null,"order_send_time":null,"warehouse_code":null,"promise_time_type":null,"source_center_name":null,"source_code":null,"source_trolley_code":null,"target_center_name":null,"slide_no":null,"target_trolley_code":null,"site_name":null,"road":null,"distribute_code":null,"print_count":null,"trance":null,"create_time":"2023-10-22 17:48:29","update_time":"2023-10-22 17:48:29","delete_time":0,"expbalance":null,"expsub":null}
				let paylist = [
					{
						userid: uni.getStorageSync('userid'),
						type: 'expcha',
						order_id: item.id,
						shopbill: item.shopbill,
						waybill: item.waybill,
						order_no: item.shopbill,
						order_price: item.cha_price || 0,
						price: item.cha_price|| 0,
						exp_order_id: item.exp_order_id
					}
				];
				let token = uni.getStorageSync("wanlshop:user").token;
				this.$wanlshop.to(`/pages/user/money/pay?token=${token}&data=${JSON.stringify(paylist)}`);
				// this.$wanlshop.to(`/pages/user/money/pay?order_id=${item.id}`);
			},
			weChatPay(data) {
				var that = this;
				uni.requestPayment({
					provider: 'wxpay',
					nonceStr: data.nonceStr,
					package: data.package,
					paySign: data.paySign,
					signType: data.signType,
					timeStamp: data.timeStamp,
					success: (res) => {
						console.log('success:' + JSON.stringify(res));
						uni.showToast({
							title: '支付成功！',
							duration: 2000
						});
						setTimeout(function() {
							that.reload();
						}, 1000)
					},
					fail: (err) => {
						console.log('fail:' + JSON.stringify(err));
						uni.showToast({
							title: '已取消支付！',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			traces(item) {
				var that = this;
				if (!item.orTraces) {
					that.$wanlshop.msg('没有物流信息');
					return;
				}

				var json = JSON.parse(item.orTraces);
				uni.setStorageSync('orTraces', json);
				that.$wanlshop.auth('/pages/order/logistics', {})
				console.log('物流信息', json)
			},
			cancelOrder(item) {
				var that = this;
				that.$uti.confirm('您确定取消订单吗？', function(res) {
					that.$http.post('Order/CancelOrder', {
						userGuid: that.$us.getId(),
						orId: item.id
					}, function(res) {
						that.$wanlshop.alert(res.Message);
						if (res.StatusCode == 1) {
							that.reload();
						}
					}, '取消中...')
				})
			},
			click(e) {
				console.log(e);
				this.current = e.index;
				this.reload();
			},
			loginClose() {
				var that = this;
				//that.isLogin = that.$us.checkLogin();
				//if (that.isLogin) {
					that.getList();
				//}
			},
			reload() {
				this.dataList = [];
				this.page = 1;
				this.isload = true;
				this.getList();
			},
			getList() {
				var that = this;
				if (!that.isload) {
					that.$wanlshop.msg('没有更多数据了');
					return;
				}
				that.status = 'loading';
				this.$api.post({
								url: '/wanlshop/kuaidi/getChaList',
								data: {
									userid:uni.getStorageSync('userid'),
									page: this.current_page
								},
								success: res => {
									console.log(res.data)
									this.dataList = res.data
									this.status=''
								}
							});
								
			},
			getStatus(text) {
				var status = '未知状态';
				switch (text.toString()) {
					case '0':
						status = '待支付'
						break;
					case '1':
						status = '待分配'
						break;
					case '-2':
						status = '支付失败'
						break;
					case '-1':
						status = '已取消'
						break;
					case '99':
						status = '调度异常'
						break;
					case '120':
						status = '待接单'
						break;
					case '102':
						status = '分配网点'
						break;
					case '103':
						status = '分配快递员'
						break;
					case '104':
						status = '待取件'
						break;
					case '301':
						status = '待揽件'
						break;
					case '2':
						status = '运输中'
						break;
					case '3':
						status = '已签收'
						break;
					default:
						status = '未知状态'
						break;
				}
				return status;
			}
		},
		onPullDownRefresh() {
			this.reload();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		onReachBottom() {
			this.getList();
		}
	}
</script>

<style>	
	.template-view {
		width: 90%;
		margin: 0 auto;
		border-radius: 20rpx;
		background: #fff;
		padding: 20rpx;
		margin-top: 20rpx;
	}

	.address-city {
		font-weight: bold;
		font-size: 32rpx;
		text-align: center;
	}

	.address-name {
		font-size: 26rpx;
		color: #999;
		text-align: center;
	}

	.font-def {
		font-size: 26rpx;
		color: #999;
	}
	.flex.flex-end {
		justify-content: flex-end;
	}
</style>
